<template>
  <div class="learingIndex">
    <!-- 设置一个选项卡 -->
    <mt-tab-container v-model="selected">
      <mt-tab-container-item id="index">
        <!-- 顶部导航和轮播图 -->
        <IndexHeader></IndexHeader>
        <!-- 课程列表 -->
        <ClassItem></ClassItem> 
        <ClassItem></ClassItem> 
      </mt-tab-container-item>
      <mt-tab-container-item id="list">
        <!-- 分类页面 -->
        <ListIndex></ListIndex>
        
      </mt-tab-container-item>
      <mt-tab-container-item id="course">
        <!-- 课程页面 -->
        <CourseIndex></CourseIndex>
                
      </mt-tab-container-item>
      <mt-tab-container-item id="my">
        <!-- 个人中心 -->
        <MyIndex></MyIndex>
        
      </mt-tab-container-item>
      
    </mt-tab-container>

    <div class="learingFooter">
       <!-- 底部切换栏 -->
      	<mt-tabbar v-model="selected" :fixed="true">
        <mt-tab-item id="index" >
          <i class="icon icon-ind"></i>
          首页
        </mt-tab-item>
        <mt-tab-item id="list" >
          <i class="icon icon-class"></i>
          分类
        </mt-tab-item>
        <mt-tab-item id="course">
          <i class="icon icon-course"></i>
          课程
        </mt-tab-item>
        <mt-tab-item id="my">
          <i class="icon icon-my"></i>
          我的
        </mt-tab-item>
      </mt-tabbar>
    </div>
  </div>
</template>
<script>
  import IndexHeader from '../components/index-header.vue';
  import ClassItem from '../components/class-item.vue';
  import ListIndex from '../module-list/index.vue';
  import CourseIndex from '../module-course/index.vue';
  import MyIndex from '../module-my/index.vue';

  export default {
    data: function () {
      return {
        selected: 'index',
        swipeable: false,
      }
    },
    components: {
      IndexHeader,
      ClassItem,
      ListIndex,
      CourseIndex,
      MyIndex
    }
  }
</script>
<style lang="scss"> 
@import "../assets/baseScss";
.learingIndex{
  text-align: center;
}
.learingFooter{
  color:$cl7;
  margin-top: 51px;
.icon{
  display: block;
  font-size: 22px;
  margin-bottom: 3px;
}
}
</style>